<template>
    <div>
        <header style="position: relative">
            <div class="sub-title">
                <div class="sub-text">食谱食材用量统计</div>
                <p class="sub-text-en">Statistics of the amount of ingredients used in recipes</p>
            </div>
            <button class="more-button" @click="showMore">More>></button>
        </header>
        <div>
            <v-chart style="width: 100%;height: 260px" :options="option"></v-chart>
        </div>
        <Modal
                v-model="modal"
                title="食谱食材用量统计图表"
                footer-hide
                width="65%">
            <div style="position: relative;text-align: center;height: 360px">
                <v-chart style="margin:auto;width:1200px;height: 360px" :options="modalOption"></v-chart>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:'food',
        components: {
        },
        props: {
        },
        data () {
            return {
                modal:false,
                option:{
                    grid:{
                        right:80,
                        top:30,
                        bottom:30
                    },
                    xAxis: {

                        axisTick: {show: false},
                        axisLabel: {
                            show:false
                        },
                        axisLine:{
                          show:false
                        },
                        type:'value',
                        splitLine: {show: false},
                        name:'单位：万斤',
                        nameTextStyle:{
                          color:'#E2E4EB'
                        },
                        position:'top',
                    },
                    yAxis: {

                        data: ['蔬菜', '肉类', '大米', '油类','配菜'],
                        splitLine: {show: false},
                        type:'category',
                        axisLabel:{
                            color:'#9B9CA5'
                        }
                    },
                    animationDurationUpdate: 1200,
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#05328A'
                            }
                        },
                        barWidth:14,
                        silent: true,
                        barGap: '-100%', // Make series be overlap
                        data: [60, 60, 60, 60,60]
                    }, {
                        type: 'bar',
                        z: 10,
                        barWidth:14,
                        label:{
                            show:true,
                            position:'right',
                            color:'#E2E4EB'
                        },
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0, color: '#BAFF57' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#02FFFE' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        data: [45, 60, 13, 25,36]
                    }]
                },
                modalOption:{
                    grid:{
                        left:60,
                        bottom:80
                    },
                    xAxis: {
                        data: ['蔬菜', '肉类', '大米', '油类','配菜','蔬菜', '肉类', '大米', '油类','配菜','蔬菜', '肉类', '大米', '油类','配菜','蔬菜', '肉类', '大米', '油类','配菜'],
                        splitLine: {show: false},
                        type:'category',
                        axisLabel:{
                            color:'#F9F9F9'
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#F9F9F9'
                            }

                        },
                    },
                    yAxis: {

                        axisTick: {show: true,
                            lineStyle:{
                                color:'#F9F9F9'
                            }},
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#F9F9F9'
                            }

                        },
                        type:'value',
                        splitLine: {show: false},
                        name:'单位：万斤',
                        nameTextStyle:{
                            color:'#F9F9F9'
                        },
                        position:'top',
                    },

                    animationDurationUpdate: 1200,
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#4B7A97'
                            }
                        },
                        barWidth:16,
                        silent: true,
                        barGap: '-100%', // Make series be overlap
                        data: [60, 60, 60, 60,60,60, 60, 60, 60,60,60, 60, 60, 60,60,60, 60, 60, 60,60]
                    }, {
                        type: 'bar',
                        z: 10,
                        barWidth:16,
                        label:{
                            show:true,
                            position:'top',
                            color:'#F9F9F9'
                        },
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0, color: '#BAFF57' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#02FFFE' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        data: [45, 60, 13, 25,36,45, 60, 13, 25,36,45, 60, 13, 25,36,45, 60, 13, 25,36,45, 60, 13, 25,36]
                    }]
                }
            }
        },
        computed: {
        },
        methods: {
            init(){
            },
            showMore(){
                this.modal=true;
            }
        },
        mounted () {
            this.init()
        },
        created(){
        }
    }

</script>
<style>
    /**
     * The default size is 600px×400px, for responsive charts
     * you may need to set percentage values as follows (also
     * don't forget to provide a size for the container).
     */
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>